<template>
    <div class="codeAlert" :class="{ 'hide': !visible, 'show': visible }">
        <div class="content">
            <svg t="1688975243714" @click="close" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2286" width="200" height="200">
                <path
                    d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832z"
                    p-id="2287"></path>
                <path
                    d="M672 352c-12.8-12.8-32-12.8-44.8 0L512 467.2 396.8 352C384 339.2 364.8 339.2 352 352S339.2 384 352 396.8L467.2 512 352 627.2c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0L512 556.8l115.2 115.2c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8L556.8 512l115.2-115.2C684.8 384 684.8 364.8 672 352z"
                    p-id="2288"></path>
            </svg>
            <div id="qrcode" ref="qrCodeUrl"></div>
            <a-button type="primary" @click="downLoad" style="margin-top: 20px;">下载</a-button>
        </div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
    name: 'AntDesignVueJeecgCodeAlert',
    data() {
        return {
            visible: false,
            companyId: '',
            qrcode: ''
        };
    },

    mounted() {

    },

    methods: {
        show(id) {
            this.visible = true;
            this.companyId=id;
            console.log('!!!!!!!')
            this.getapp()
        },
        close() {
            this.visible = false;
            this.qrcode = '';
            this.companyId = '';
            document.getElementById("qrcode").innerHTML = ""
        },
        getapp() {
            this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: 'https://www.yongshantuan.cn/#/pages/order?id=' + this.companyId,
                // text: 'http://192.168.2.68:8080/#/pages/order?id=' + this.companyId,
                width: 150,
                height: 150,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });
        },
        downLoad() {
            let myImg = document.querySelector("#qrcode img");
            let url = myImg.src;
            let a = document.createElement('a');
            a.href = url;
            a.download = '二维码'; //下载图名称
            a.click();
            this.$message.success("下载成功");
        }
    },
};
</script>

<style lang="scss" scoped>
.codeAlert {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.hide {
    top: 10000px;
}

.show {
    top: 0;
}

.content {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    svg {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
}</style>